<template>
  <div v-if="list">
    <div v-if="list.length">
      <div v-for="item in list" :key="item.id" class="flex j-between a-center p-10 p-v-15 b-b">
        <router-link to="/goods/detail/123" class="a-s-start w-80">
          <img class="w-full b-r-4 m-t-3 fs-rem-12px" :src="item.picture" alt="商品logo" />
        </router-link>
        <div class="flex-1 m-l-10">
          <router-link
            tag="p"
            :to="`/goods/detail/${item.id}`"
            class="fs-rem-16px text-title overflow-one"
          >{{item.gname}}</router-link>
          <p class="fs-rem-12px text-grey m-t-5 overflow-one">{{item.spms}}</p>
          <p
            v-if="!item.hasGetDiscounts"
            class="fs-rem-12px text-content m-t-3"
          >剩余: {{item.yl}}{{item.unit}}</p>
          <!-- yhtype 1. 折扣 2. 现金 -->
          <p class="m-t-5" v-if="item.yhtype === 1">
            <span class="text-red fs-rem-16px">¥{{item.nprice}}</span>
            <s class="text-grey m-l-5 fs-rem-12px">¥{{item.fprice}}</s>
          </p>
          <p class="m-t-5" v-else>
            <span class="text-red fs-rem-16px">{{item.yh || '-'}}折</span>
            <s class="text-grey m-l-5 fs-rem-12px">¥{{item.fprice}}</s>
          </p>
        </div>
        <div class="m-l-10">
          <van-button
            size="small"
            class="bg-yellow b-none text-white"
            :disabled="item.status === 2 || item.hasGetDiscounts"
            @click="handleGetDiscounts(item)"
          >
            <span v-if="item.hasGetDiscounts">已领取</span>
            <span v-else>{{item.status === 1 ? '领折扣券' : '已下架'}}</span>
          </van-button>
        </div>
      </div>
    </div>
    <div v-else>
      <empty-data class="text-center m-t-20" content="暂无商家评论"></empty-data>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/images/merchant.jpg'
export default {
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {
      logo
    }
  },
  methods: {
    async handleGetDiscounts (item) {
      let { message, status } = await this.$api.post('/xf/user/add', {
        gid: item.id
      })
      // 3 没有当前用户
      // 0 成功
      // 4 没有这个商品
      // 5 这个商品已下架
      // 6 会员当天在当前商家已经进行过两次消费
      // 7 该商品库存不足
      if (status === 401) return
      if (status === 0) {
        this.$toast.success(message)
        item.hasGetDiscounts = true
      } else {
        this.$toast.fail(message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.a-s-start {
  align-self: flex-start;
}
</style>
